<template>
  <view class="animate__animated animate__lightSpeedInLeft">
    <view :key="keyvalue">
      <view class="followAction">
        <follow :bodytext='bodytext' color="#fff" text="分享" :url="followurl"></follow>
      </view>
      <view class="scroll">
        <!-- 左侧的滚动视图区域 -->
        <scroll-view class="left-scroll-view" scroll-y :style="{height: wh + 'px'}">
          <block v-for="(item, i) in tagData.item" :key="i">
            <view :class="['left-scroll-view-item',i===tagData.active?'active':'']" @click="activeChanged(i,item)">
              {{item.name}}
            </view>
          </block>
        </scroll-view>
        <!-- 右侧的滚动视图区域 -->
        <view class="content">
          <!-- 导航滚动区域 -->
          <scroll-view scrollY class="scroll-bar" :style="{height: wh + 'px'}" :scroll-top="scrollTop"
            v-if="tagData.active==0" @scrolltolower='imglist()'>
            <view class="wrap">
              <view class="flex-bar flex-wrap item-img" v-show="tagData.active==0">
                <view class="col-6 opacity" v-for="(item,i) in tagData.item[0].list" :key="i">
                  <image class="img" @click="inToSeeImg(tagData.item[0].list,i)" :src="item.imageUrl"></image>
                </view>
              </view>
            </view>
          </scroll-view>
          <scroll-view scrollY class="scroll-bar" :style="{height: wh + 'px'}" :scroll-top="scrollTop"
            v-for="(item,i) in tagData.item" :key="i" v-if="i>0" v-show="tagData.active==i"
            @scrolltolower="clickimglist(item)">
            <view class="wrap">
              <view class="flex-bar flex-wrap item-img">
                <view class="col-6 opacity" v-for="(item,i) in item.list" :key="i">
                  <image class="img" @click="inToSeeImg(tagData.item[tagData.active].list,i)" :src="item.imageUrl">
                  </image>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </view>
    <!-- 普通弹窗 -->
    <uni-popup ref="popup" type="top">
      <ad unit-id="adunit-88c7801bc02ea764"></ad>
    </uni-popup>
  </view>
</template>

<script>
  import Vue from 'vue'
  import badgeMix from '@/mixins/tabbar-badge.js'
  export default {
    mixins: [badgeMix],
    data() {
      return {
        wh: 0,
        tagData: {
          active: 0, //当这个值为0时拿数据
          item: [{
            name: "精选",
            list: []
          }, {
            name: "星空",
            tag: "星空"
          }, {
            name: "风景",
            tag: "风景"
          }, {
            name: "爱情",
            tag: "爱情"
          }, {
            name: "二次元",
            tag: "二次元"
          }, {
            name: "游戏",
            tag: "游戏"
          }, {
            name: "插画",
            tag: "插画"
          }, {
            name: "科技",
            tag: "科技"
          }, {
            name: "创意",
            tag: "创意"
          }, {
            name: "汽车",
            tag: "汽车"
          }, {
            name: "美食",
            tag: "美食"
          }, {
            name: "潮流",
            tag: "潮流"
          }]
        },
        wechat: {
          device: "weChat",
          system: "weChat",
          devicePixel: 480,
          homeOpenCount: -1,
          type: "WALLPAPER_INDEX",
          region: "CN"
        }, //精选的数据参数
        cardCount: 20, //其他区类目的请求参数
        keyvalue: 0, //刷新视图的变量
        scrollTop: 0, //滚动条距离顶部的距离
        isloading: false,
        followurl: 'https://pic.imgdb.cn/item/63f3bfaff144a0100763e1fc.jpg',
        bodytext: '我自横刀向天笑,去留肝胆两昆仑!',
      }
    },
    onLoad(option) {
      const sysInfo = uni.getSystemInfoSync()
      this.wh = sysInfo.windowHeight
      for (var e in this.tagData.item) e > 0 && (this.tagData.item[e].list = [], this.tagData.item[e].cardStart =
        0, this.tagData.item[
          e].load = true)
      this.imglist()
      this.open()
    },
    methods: {
      open() {
        // 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
        this.$refs.popup.open('top')
      },
      activeChanged(i, item) {
        this.tagData.active = i;
        this.scrollTop = this.scrollTop ? 0 : 1
        if (i > 0) {
          this.clickimglist(item)
        }
      }, //单击目录改active获取数据
      async imglist() {
        this.isloading = true
        const {
          data: res
        } = await uni.$http.get('/app/v9/uipages/recommend', this.wechat)
        if (res.apiMessage !== "success") return uni.$showMsg()
        this.isloading = false
        var dataimg = res.apiData.cards[0].belowSubjectProducts
        if (dataimg.length) {
          for (var i in dataimg) 'ios' == wx.getSystemInfoSync().platform && (dataimg[i].imageUrl = dataimg[i]
              .imageUrl.replace("/webp/", "/jpeg/")),
            this.tagData.item[0].list.push(dataimg[i]);
        }
      }, //精选类目的数据
      async clickimglist(item) {
        this.isloading = true
        var obj = {
          tag: item.tag,
          cardStart: item.cardStart, //第几次
          cardCount: this.cardCount,
          devicePixel: 480,
          type: "WALLPAPER",
          region: "cn"
        }
        const {
          data: res
        } = await uni.$http.get('/app/v9/uipages/search/tag', obj);
        this.isloading = false
        var a = res.apiData.cards[0].products;
        for (var m in a) "ios" == wx.getSystemInfoSync().platform && (a[m].imageUrl = a[m].imageUrl.replace(
            "/webp/",
            "/jpeg/")),
          this.tagData.item[this.tagData.active].list.push(a[m]);
        this.keyvalue++
        this.tagData.item[this.tagData.active].cardStart++
        // this.$forceUpdate();//强制刷新
      }, //其他类目的数据
      inToSeeImg(item, i) {
        var src = item[i].imageUrl;
        var title = item[i].title;
        uni.navigateTo({
          url: '/subpkg/goods-img/goods-img?src=' + src + '&title=' + title
        })
      } //跳转img组件
    }
  }
</script>

<style lang="scss">
  .followAction {
    background-image: linear-gradient(160deg, #008cff 20%, #00ffd5 80%);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    position: sticky;
    top: 0;
    z-index: 99;
    margin-top: 1px
  }

  .scroll {
    display: flex;

    .content {
      .wrap {
        padding-left: 10rpx;
        padding-right: 10rpx;
      }
    }

    .left-scroll-view {
      width: 55px;
      color: #fff;

      .left-scroll-view-item {
        line-height: 60px;
        // background-color: #f7f7f7;
        text-align: center;
        font-size: 12px;

        // 激活项的样式
        &.active {
          // background-color: #ffffff;
          position: relative;

          // 渲染激活项左侧的红色指示边线
          &::before {
            content: ' ';
            display: block;
            width: 3px;
            height: 30px;
            background-color: #c00000;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }
    }
  }
</style>
